<template>
  <div id="regist">
    <div class="containner flex item-center justify-around"><img src="../assets/img/login_bg.png"
        class="rounded box-shadow">
      <div>
        <div class="gray weight text-xl">注册新账户</div>
        <form>
          <div class="mt-20"><input type="text" placeholder="请输入手机号码" v-model="customer.user_phone"
              class="user_name hand"></div>
          <div class="mt-20"><input type="password" placeholder="请输入账户密码" v-model="customer.user_password"
              class="user_pass hand"></div>
          <div class="mt-20"><input type="password" placeholder="请再次确认密码" v-model="customer.confirm_password"
              class="user_pass hand"></div>
          <div class="mt-20"><input type="text" placeholder="请输入用户昵称" v-model="customer.user_name"
              class="user_name hand"></div>
          <div class="mt-20"><button type="button" class="btn-login hand" @click="customer_regist()"> 立即注册 </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapActions
  } from 'vuex'
  export default {
    computed: {
      /* user_phone() {
        return this.$store.state.user_phone
      } */
      /* user_password() {
        return this.$store.state.user_password
      } */
      // ...mapState({'user_phone':'user_phone','user_password':'user_password','confirm_password':'confirm_password'})
      // ...mapState('customer', ['user_phone', 'user_password', 'confirm_password', 'user_name'])
      ...mapState(['customer'])
    },
    methods: {
      /* customer_regist(){
        this.$store.dispatch('customer/customer_regist');
      } */
      // ...mapActions({'customer_regist':'customer_regist'})
      ...mapActions('customer', ['customer_regist'])
    }
  }
</script>

<style scoped>
  @import '../assets/css/regist.css';
</style>
